<template>
  <transition name="fade" v-on:after-enter="afterEnter">
    <div v-if="show" class="wrap">
<!--      <head-bar :pageInfo="pageInfo" />-->
      <!--本周活跃榜-->
      <div class="col col-1">
        <div class="content">
          <div class="sub-tit-1">
            <div class="ico">
              <span></span>
              <span></span>
            </div>
            <div class="txt">本周活跃榜</div>
          </div>
          <div class="list">
            <ul>
              <li v-for="(item,index) in pageInfo.rank" :key="index">
                <div class="num">{{++index}}.</div>
                <div class="photo">
                  <img :src="item.photo === '' ? `${publicPath}images/default-photo.jpg` : item.photo" alt=""></div>
                <div class="name">{{item.name}}</div>
                <div class="source">{{item.score}}分</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--本周最佳-->
      <div class="col col-2">
        <div class="content">
          <div class="sub-tit-2">本周最佳</div>
          <div class="info">
            <div class="photo">
              <img :src="pageInfo.best.photo === '' ? `${publicPath}images/default-photo.jpg` : pageInfo.best.photo" alt="">
            </div>
            <div class="name">{{pageInfo.best.name}}</div>
            <div class="sorce">
              <div class="tip">活跃度</div>
              <div class="num">
                <div class="t">分</div>
                <div class="n">{{pageInfo.best.score}}</div>
              </div>
            </div>
          </div>
          <!--图表-->
          <div class="chart" id="best"></div>
        </div>
      </div>
      <!--中心概况-->
      <div class="col col-3">
        <div class="content">
          <div class="sub-tit-2">中心概况</div>
          <ul class="nums">
            <li v-for="(item,index) in pageInfo.center" :key="index">
              <div class="tit">
                <div class="txt">{{item.name}}</div>
                <div :class="['ico','ico-' + ++index]"></div>
              </div>
              <div class="num">
                <div class="t">{{index === 6 ? '次' : '人'}}</div>
                <div class="n">{{item.num}}</div>
              </div>
            </li>

          </ul>
        </div>
      </div>
      <!--本周接待人数-->
      <div class="col col-4">
        <div class="content">
          <div class="sub-tit-1">
            <div class="ico">
              <span></span>
              <span></span>
            </div>
            <div class="txt">本周接待人次({{pageInfo.chart1.num}})</div>
          </div>
          <div class="chart-1" id="receive">图表</div>
        </div>
      </div>
      <!--本周活动次数-->
      <div class="col col-5">
        <div class="content">
          <div class="sub-tit-1">
            <div class="ico">
              <span></span>
              <span></span>
            </div>
            <div class="txt">本周活动次数({{pageInfo.chart2.num}})</div>
          </div>
          <div class="chart-1" id="active">图表</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Detail',
  data () {
    return {
      pad: false,
      show: false,
      pageInfo: {
        'time': 3000,
        'dataid': 1,
        'nextrouter': 'xxxx',
        'prerouter': 'xxx',
        'weatherType': '1',
        'weartherContent': '晴转多云',
        'temperature': '26-27',
        'name': '社区养老中心',
        'best': {
          'name': 'lisi',
          'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
          'score': '678',
          'data': [
            {
              'name': 'A',
              'value': 4300
            },
            {
              'name': 'B',
              'value': 10000
            },
            {
              'name': 'C',
              'value': 28000
            },
            {
              'name': 'D',
              'value': 35000
            },
            {
              'name': 'E',
              'value': 50000
            },
            {
              'name': 'F',
              'value': 19000
            }
          ]
        },
        'center': [
          {
            'num': '123123',
            'name': '社区人数'
          },
          {
            'num': '123123',
            'name': '老年人数'
          },
          {
            'num': '123123',
            'name': '接待人数'
          },
          {
            'num': '123123',
            'name': '运营天数'
          },
          {
            'num': '123123',
            'name': '慰问人次'
          },
          {
            'num': '123123',
            'name': '社区活动'
          }
        ],
        'rank': [
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          },
          {
            'photo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571458096116&di=f7c7da30431e241f583c257b6d52bba7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            'name': 'lis',
            'score': '678'
          }
        ],
        'chart1': {
          'name': '本周接待人数',
          'data': [
            {
              'week': 'Mon',
              'data': 820
            },
            {
              'week': 'Tue',
              'data': 932
            },
            {
              'week': 'Wed',
              'data': 901
            },
            {
              'week': 'Thu',
              'data': 934
            },
            {
              'week': 'Fri',
              'data': 1290
            },
            {
              'week': 'Sat',
              'data': 1330
            },
            {
              'week': 'Sun',
              'data': 1320
            }
          ]
        },
        'chart2': {
          'name': '本周接待人数',
          'data': [
            {
              'week': 'Mon',
              'data': 820
            },
            {
              'week': 'Tue',
              'data': 932
            },
            {
              'week': 'Wed',
              'data': 901
            },
            {
              'week': 'Thu',
              'data': 934
            },
            {
              'week': 'Fri',
              'data': 1290
            },
            {
              'week': 'Sat',
              'data': 1330
            },
            {
              'week': 'Sun',
              'data': 1320
            }
          ]
        }
      }
    }
  },
  components: {},
  methods: {
    afterEnter () {
      // console.log('entered')
      const that = this
      that.drawBest()
      that.drawReceive()
      that.drawActive()
    },
    // 本周最佳
    drawBest () {
      const that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('best'))
      // console.log('1324:', Math.max(...that.pageInfo.best.data.map(arr => {return arr.value})))
      // console.log('1324:', Math.max(that.pageInfo.best.data.map(arr => {return arr.value})) + 100)
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: ''
        },
        tooltip: {},
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              fontSize: 24
            }
          },
          radius: '65%',
          indicator: that.pageInfo.best.data.map(arr => {
            return {
              name: arr.name,
              max: Math.max(...that.pageInfo.best.data.map(arr => { return arr.value || 0 })) + 50
            }
          }),
          // indicator: [
          //   {
          //     name: that.pageInfo.best.data[0].name,
          //     max: Math.max(that.pageInfo.best.data.map(arr => {return arr.value})) + 100
          //   },
          //   { name: that.pageInfo.best.data[1].name, max: 750 },
          //   { name: that.pageInfo.best.data[2].name, max: 750 },
          //   { name: that.pageInfo.best.data[3].name, max: 750 },
          //   { name: that.pageInfo.best.data[4].name, max: 750 },
          //   { name: that.pageInfo.best.data[5].name, max: 750 }
          // ],
          splitNumber: 2,
          axisLine: {
            lineStyle: {
              opacity: 0.1
            }
          },
          splitLine: {
            lineStyle: {
              opacity: 0.1
            }
          },
          splitArea: {
            show: false,
            opacity: 0
          }
        },

        scale: {
          ticks: {
            min: 0,
            max: 100
          }
        },
        series: [{
          name: '得分',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: that.pageInfo.best.data.map(arr => {
                return arr.value
              }),
              name: '分数明细'
            }
          ]
        }],
        color: ['#3aaee8']

      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    // 本周接待人数
    drawReceive () {
      const that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('receive'))
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: 'category',
          data: that.pageInfo.chart1.data.map(arr => {
            return arr.week
          }),
          axisLine: {
            lineStyle: {
              color: ['#64bdcb']
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: ['blue'],
              width: 1,
              type: 'solid'
            }
          },
          axisLine: {
            lineStyle: {
              color: ['#64bdcb']
            }
          }
        },
        series: [{
          data: that.pageInfo.chart1.data.map(arr => {
            return arr.data
          }),
          type: 'line'
        }],
        textStyle: {
          color: '#fff'
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#44f0ff']
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    // 本周活动人数
    drawActive () {
      const that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('active'))
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: 'category',
          data: that.pageInfo.chart2.data.map(arr => {
            return arr.week
          }),
          axisLine: {
            lineStyle: {
              color: ['#64bdcb']
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: ['blue'],
              width: 1,
              type: 'solid'
            }
          },
          axisLine: {
            lineStyle: {
              color: ['#64bdcb']
            }
          },
          color: ['#fd377d']
        },
        series: [{
          data: that.pageInfo.chart2.data.map(arr => {
            return arr.data
          }),
          type: 'line'
        }],
        textStyle: {
          color: '#fff'
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async getPageInfo () {
      const that = this
      const params = {
        id: that.$route.query.id,
        jumpId: that.$route.query.jumpId,
        'from': that.$route.query.deviceType,
        curRouter: 'detail'
      }
      // console.log('params', params)
      // const res = await that.$api.detail(params)
      // // console.log('pageInfo---------', res, params)
      // that.pageInfo = res

      await that.$store.dispatch('getDetail', params)
      that.pageInfo = that.$store.state.pagedetail
      that.show = true
    }
  },
  mounted () {
    /**
     * deviceType
     * pad 显示按钮控制
     * tv 不显示按钮控制
     */
    const that = this
    const deviceType = this.$route.query.deviceType
    this.pad = deviceType === 'pad'
    this.pageDataTimer = setInterval(async () => {
      that.getPageInfo()
    }, that.pageInfo.time)
  }
}
</script>

<style lang="scss" scoped>
  .wrap {
    background: url('../../public/images/main-bg.jpg') no-repeat center center;
  }
  .sub-tit-1 {
    padding-left: 64px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 36px;
    @-webkit-keyframes animate8 {
      0%,
      40%,
      100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      10%,
      20% {
        -webkit-transform: translate3d(5px, 0, 0);
        opacity: 0;
      }
      15%,
      30% {
        -webkit-transform: translate3d(-5px, 0, 0);
        opacity: 0;

      }
    }
    .ico {
      position: absolute;
      left: 0;
      top: 0;
      span {
        width: 27px;
        height: 26px;
        background: url('../../public/images/arr-tit.png') no-repeat;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: animate8 3s linear .1s infinite;
        &:last-child {
          -webkit-animation: animate8 3s linear .3s infinite;
          left: 24px;
        }
      }
    }
    .txt {
      font-size: $fz6;
      font-weight: bold;
    }
  }
  .sub-tit-2 {
    $h: 46px;
    $w: 120px;
    font-size: $fz6;
    font-weight: bold;
    position: absolute;
    width: $w;
    height: $h;
    top: -$h;
    left: 50%;
    margin-left: -$w/2;
  }
  .col {
    position: absolute;
    &-1 {
      position: absolute;
      left: 57px;
      top: 209px;
      width: 407px;
      height: 706px;
      background: url('../../public/images/detail-col1.png') no-repeat center top;
      .content {
        position: relative;
        margin-left: 35px;
        margin-top: 30px;
      }
      .list {
        ul {
          li {
            $h: 36px;
            $mb: 24px;
            height: $h;
            line-height: $h;
            margin-bottom: $mb;
            font-size: $fz5;
            font-weight: bold;
            @include clearfix();
            .num, .photo, .name {
              @include fl();
              @include ell();
            }
            .source {
              @include fr();
              @include ell();
              width: 80px;
            }
            .num {
              width: 45px;
              text-align: right;
            }
            .photo {
              height: $h;
              width: $h;
              -webkit-border-radius: $h/2;
              -moz-border-radius: $h/2;
              border-radius: $h/2;
              overflow: hidden;
              margin-left: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              width: 120px;
              margin-left: 10px;
            }
          }
        }
      }
    }
    &-2 {
      position: absolute;
      left: 534px;
      top: 161px;
      width: 836px;
      height: 448px;
      background: url('../../public/images/detail-col2.png') no-repeat center top;
      .content {
        position: relative;
        margin-top: 30px;
        margin-left: 5px;
      }
      .info {
        position: absolute;
        width: 317px;
        height: 363px;
        top: 0;
        left: 52px;
        background: url('../../public/images/col-2-bg.png') no-repeat bottom right;
        .photo {
          $sz: 140px;
          width: $sz;
          height: $sz;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          overflow: hidden;
          margin: 24px auto 0;
          border: 2px solid $c1;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .name {
          font-size: $fz6;
          font-weight: bold;
          text-align: center;
          height: 34px;
          line-height: 34px;
          @include clearfix();
          padding-top: 24px;
          width: 100%;
        }
        .sorce {
          @include fr();
          .tip {
            padding-top: 20px;
            padding-bottom: 5px;
          }
          .num {
            @include clearfix();
            color: $c2;
            .n, .t {
              @include fr();
            }
            $h-b: 90px;
            $h_s: 30px;
            .n {
              height: $h-b;
              line-height: $h-b;
              font-size: $fz8 * 2;
              font-family: Acens;
              letter-spacing: 5px;
            }
            .t {
              height: $h-s;
              line-height: $h-s;
              padding-top: $h-b - $h-s * 1.7;
              padding-left: 10px;
              font-size: $fz7;
            }
          }
        }
      }
      .chart {
        width: 360px;
        height: 375px;
        /*border: 1px solid $c1;*/
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    &-3 {
      position: absolute;
      left: 532px;
      top: 657px;
      width: 836px;
      height: 320px;
      background: url('../../public/images/detail-col3.png') no-repeat center top;
      .content {
        position: relative;
        margin-top: 35px;
        margin-left: 5px;
      }
      .nums {
        padding-top: 20px;
        padding-right: 80px;
        li {
          background: url('../../public/images/line-bg.png') no-repeat bottom right;
          width: 33.333%;
          margin-bottom: 39px;
          @include fl();
          text-align: right;
          .tit {
            height: 12px;
            line-height: 12px;
            @include clearfix();
            .ico, .txt {
              @include fr();
            }
            .txt {
              font-size: $fz0;
              padding-left: 5px;
            }
            .ico {
              width: 25px;
              height: 12px;
              &-1 {
                background: url('../../public/images/ico-center1.png') no-repeat center center;
              }
              &-2 {
                background: url('../../public/images/ico-center2.png') no-repeat center center;
              }
              &-3 {
                background: url('../../public/images/ico-center3.png') no-repeat center center;
              }
              &-4 {
                background: url('../../public/images/ico-center4.png') no-repeat center center;
              }
              &-5 {
                background: url('../../public/images/ico-center5.png') no-repeat center center;
              }
              &-6 {
                background: url('../../public/images/ico-center6.png') no-repeat center center;
              }
            }
          }
          .num {
            @include clearfix();
            padding-top: 12px;
            color: $c2;
            height: 48px;
            .t, .n {
              @include fr();
            }
            .n {
              font-size: $fz4 * 2;
              line-height: 48px;
              vertical-align: middle;
              font-family: Acens;
            }
            .t {
              padding-left: 5px;
              padding-top: 18px;
              height: 24px;
              line-height: 24px;
            }
          }
        }
      }
    }
    $s-w: 428px;
    $s-h: 336px;
    &-4 {
      position: absolute;
      left: 1443px;
      top: 209px;
      width: $s-w;
      height: $s-h;
      background: url('../../public/images/detail-col4.png') no-repeat center center;
      .content {
        position: relative;
        margin-top: 30px;
        margin-left: 35px;
      }
      .chart-1 {
        height: 204px;
        width: $s-w - 70;
        /*border: 1px solid $c1;*/
      }
    }
    &-5 {
      position: absolute;
      left: 1443px;
      top: 580px;
      width: $s-w;
      height: $s-h;
      background: url('../../public/images/detail-col4.png') no-repeat center center;
      .content {
        position: relative;
        margin-top: 30px;
        margin-left: 35px;
      }
      .chart-1 {
        height: 204px;
        width: $s-w - 70;
        /*border: 1px solid $c1;*/
      }
    }

  }
</style>
